<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流查询 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 物流追踪时间线样式 */
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 30px auto;
            padding: 20px 0;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: var(--light-color);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
            border-radius: 3px;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: white;
            border: 4px solid var(--primary-color);
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-left {
            left: 0;
        }

        .timeline-right {
            left: 50%;
        }

        .timeline-left::after {
            right: -13px;
        }

        .timeline-right::after {
            left: -13px;
        }

        .timeline-content {
            padding: 20px;
            background-color: white;
            position: relative;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
        }

        .timeline-date {
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .timeline-status {
            font-weight: 600;
            color: var(--secondary-color);
        }

        .timeline-location {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-top: 5px;
        }

        .package-info {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
            padding: 20px;
            margin: 30px auto;
            max-width: 800px;
        }

        .package-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .package-title {
            font-size: 1.5rem;
            color: var(--secondary-color);
        }

        .package-number {
            background-color: var(--light-color);
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            color: var(--dark-color);
        }

        .package-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .detail-item {
            margin-bottom: 15px;
        }

        .detail-label {
            font-weight: 600;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .detail-value {
            color: var(--dark-color);
        }

        .current-status {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            margin-top: 10px;
        }

        .status-delivered {
            background-color: rgba(46, 204, 113, 0.2);
            color: var(--success-color);
        }

        .status-in-transit {
            background-color: rgba(52, 152, 219, 0.2);
            color: var(--primary-color);
        }

        .status-pending {
            background-color: rgba(231, 76, 60, 0.2);
            color: var(--accent-color);
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">
                <i class="fas fa-truck-fast"></i>
                <h1>物流追踪系统</h1>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="../../index.html"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="dashboard.html"><i class="fas fa-user"></i> 用户中心</a></li>
                    <li><a href="track.html" class="active"><i class="fas fa-search"></i> 物流查询</a></li>
                    <li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                </ul>
            </nav>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <main class="container">
        <section class="hero" style="margin-bottom: 3rem; padding: 4rem 0;">
            <div class="hero-content">
                <h2>物流实时查询</h2>
                <p>快速查询您的包裹动态，掌握最新物流信息</p>
                <div class="track-form">
                    <input type="text" id="tracking-number" placeholder="请输入运单编号" required>
                    <button id="track-btn" class="btn-primary">
                        <i class="fas fa-search"></i> 立即查询
                    </button>
                </div>
            </div>
        </section>

        <div id="loading" style="display: none; text-align: center; padding: 20px;">
            <div style="width: 40px; height: 40px; border: 4px solid rgba(52, 152, 219, 0.3); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; margin: 0 auto;"></div>
            <p style="margin-top: 15px;">查询中，请稍候...</p>
            <style>
                @keyframes spin {
                    to { transform: rotate(360deg); }
                }
            </style>
        </div>

        <div id="package-details"></div>

        <div id="tracking-timeline"></div>
    </main>

    <footer>
        <div class="container footer-container">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>物流追踪系统致力于为用户提供高效、便捷、可靠的物流信息追踪服务，让物流变得更加透明和可控。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="../../index.html">首页</a></li>
                    <li><a href="../auth/login.html">登录</a></li>
                    <li><a href="../auth/register.html">注册</a></li>
                    <li><a href="dashboard.html">用户中心</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-phone"></i> 400-123-4567</li>
                    <li><i class="fas fa-envelope"></i> support@wuliuzhuizong.com</li>
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区物流大厦15层</li>
                </ul>
            </div>
        </div>
        <div class="container footer-bottom">
            <p>&copy; 2023 物流追踪系统 版权所有</p>
        </div>
    </footer>

    <script type="module">
        import authService from '../../js/auth.js';
        import Utils from '../../js/utils.js';
        import userTracker from '../../js/modules/user-tracker.js';

        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 导入并初始化应用
            import('../../js/app.js');

            // 移动端菜单切换
            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
            const mainNav = document.querySelector('.main-nav');

            if (mobileMenuBtn && mainNav) {
                mobileMenuBtn.addEventListener('click', function() {
                    mainNav.classList.toggle('active');
                    mobileMenuBtn.querySelector('i').classList.toggle('fa-bars');
                    mobileMenuBtn.querySelector('i').classList.toggle('fa-times');
                });
            }

            // 退出登录
            document.getElementById('logout-btn').addEventListener('click', (e) => {
                e.preventDefault();
                authService.logout();
            });

            // 手动查询按钮
            document.getElementById('track-btn').addEventListener('click', () => {
                const trackingNumber = document.getElementById('tracking-number').value;
                if (trackingNumber) {
                    // 存储查询单号
                    Utils.storage.set('trackingNumber', trackingNumber);
                    // 显示加载中
                    document.getElementById('loading').style.display = 'block';
                    // 隐藏结果
                    document.getElementById('package-details').innerHTML = '';
                    document.getElementById('tracking-timeline').innerHTML = '';
                    // 执行查询
                    userTracker.trackPackage(trackingNumber)
                        .then(() => {
                            document.getElementById('loading').style.display = 'none';
                        })
                        .catch(() => {
                            document.getElementById('loading').style.display = 'none';
                        });
                } else {
                    alert('请输入有效的运单编号');
                    document.getElementById('tracking-number').focus();
                }
            });

            // 支持回车键查询
            document.getElementById('tracking-number').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('track-btn').click();
                }
            });

            // 页面加载时，如果有存储的运单编号，则自动查询
            const savedTrackingNumber = Utils.storage.get('trackingNumber');
            if (savedTrackingNumber) {
                document.getElementById('tracking-number').value = savedTrackingNumber;
                document.getElementById('track-btn').click();
            }
        });
    </script>
</body>
</html>